<!-- 轮播图 -->
<template>
	<el-carousel :interval="4000" type="card" height="14vw">
		<el-carousel-item v-for="item in bannerList" :key="item.encodeId">
			<img :src="item.imageUrl" alt="">
		</el-carousel-item>
	</el-carousel>
</template>

<script lang="ts" setup>
import { type IBannerlist, getBannerApi } from '@/api/recommendApi'
import { onMounted, ref } from 'vue';

let bannerList = ref([]) as unknown as [IBannerlist]

const getBanner = async () => {
	const res = await getBannerApi()
	bannerList.value = res.banners
}

onMounted(() => {
	getBanner()
})
</script>

<style lang="scss">
.el-carousel {
	width: 76vw;
	margin: auto;
}

.el-carousel__item {
	border-radius: 10px;
}


img {
	height: 100%;
	width: 100%;
	display: block;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}
</style>